<template>
  <view class="message-item" :class="{ 'message-self': isSelf }">
    <view class="message-content">
      <view class="message-name" v-if="config.chatConfig.showName === true">{{
       isSelf ? (config.chatConfig.selfNameShow ? message.name : '') : (config.chatConfig.otherNameShow ? message.name : '')
      }}</view>
      <view class="message-bubble" :class="message.type">
        <!-- 发送失败状态 -->
        <view class="upload-send-status" v-if="message.status === 'send-fail'">
          <view class="chatIcon icon-tishi" style="font-size: 40rpx; color: #ff807e"></view>
        </view>
        <!-- 上传状态 -->
        <view v-if="message.status === 'upload'" class="upload-status">
          <u-loading-icon
            mode="circle"
            size="24rpx"
            inactive-color="#92e7b4"
          />
            <!-- 不显示进度  message.process -->
        </view>
        <!-- debug -->
        <view class="upload-status" v-if="false">
          <u-icon name="fingerprint" @click="debugShow"></u-icon>
        </view>
        <!-- 消息内容 -->
        <slot></slot>
      </view>
      <text class="message-time">{{ formatTime(message.time) }}</text>
    </view>
  </view>
</template>
<script setup lang="ts">
import { computed } from "vue";
import config from "../../config";

// 监听消息变化
const message = defineModel("message", {
  type: Object,
  required: false,
  default: () => {},
});

// 是否是当前用户发送的消息
const isSelf = computed(() => {
  return message.value.from === "user";
});

/**
 * 格式化时间
 * 如果是今天，1小时之前显示xx秒/分之前， 则显示时分，如果是昨天，则显示昨天，否则显示年月日时分
 * @param timestamp 时间戳
 * @returns 格式化后的时间
 */
const formatTime = (timestamp: number) => {
  const date = new Date(timestamp);
  const now = new Date();
  const diffTime = now.getTime() - date.getTime();
  const ms = `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}`;
  if (diffTime < 60 * 1000) {
    return ms;
  } else if (diffTime < 60 * 60 * 1000) {
    return `${(diffTime / 60000).toFixed(0)}分钟前`;
  } else if (diffTime < 24 * 60 * 60 * 1000) {
    return `昨天 ${ms}`;
  } else {
    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${ms}`;
  }
};

const debugShow = () => {
  uni.showModal({
    title: "调试信息",
    content: JSON.stringify(message.value, null, 2),
    showCancel: false,
  });
};
</script>
<style scoped lang="scss">
.message-item {
  display: flex;
  margin-bottom: 30rpx;

  .message-name {
    font-size: 28rpx;
    font-weight: bold;
    padding: 10rpx 20rpx;
  }

  &.message-self {
    flex-direction: row-reverse;

    .message-content {
      align-items: flex-end;
      margin-right: 20rpx;
      margin-left: 100rpx;
    }

    .message-bubble {
      background-color: #e0efff;
      color: #52575c;
      position: relative;

      &::after {
        right: -20rpx;
        border-left-color: #e0efff;
      }

      .upload-send-status {
        position: absolute;
        left: -50rpx;
        top: 10rpx;
      }

      .upload-status {
        position: absolute;
        // left: 0;
        // top: calc(100% + 10rpx);
        left: -40rpx;
        top: 10rpx;
      }
    }
  }
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

.message-content {
  display: flex;
  flex-direction: column;
  margin-left: 20rpx;
  margin-right: 100rpx;
}

.message-bubble {
  max-width: 60vw;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  position: relative;

  &.image {
    padding: 10rpx;
    background-color: transparent;
  }

  &.voice {
    min-width: 160rpx;
  }
}

.message-image {
  max-width: 400rpx;
  border-radius: 10rpx;
}

.message-video {
  width: 400rpx;
  height: 300rpx;
  border-radius: 10rpx;
}

.voice-message {
  display: flex;
  align-items: center;
  gap: 10rpx;

  .voice-icon {
    transition: all 0.3s ease;
    color: #464646;

    &.playing {
      animation: voicePlay 1s infinite ease;
    }
  }
}

@keyframes voicePlay {
  0% {
    text-shadow: 0 0 10rpx rgba(100, 250, 255, 0.5);
    color: #3d9bff;
  }
  50% {
    text-shadow: 0 0 10rpx rgba(35, 174, 255, 0.5);
  }
  100% {
    text-shadow: 0 0 10rpx rgba(68, 255, 139, 0.5);
    color: #5b87b6;
  }
}

.message-time {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}
</style>
